import React from 'react';
import { createForm } from 'rc-form';
import { Toast } from 'antd-mobile';
import styles from './forgetPassword.css';
import CustBtn from '../../../../../../../common/buttons/Btn';

const ForgetPassword = ({
  oldPassword,
  phone,
  code,
  onNext=()=>{},
  form: { getFieldProps, getFieldsValue, validateFields },
}) => {

  const btnProps = {
    textValue:'下一步',
    onOk(){
      validData();
    },
  }

  const validData = () => {
    validateFields((error, value) => {
      // console.log(error, value);
      if (error) {
        for (var i in error) {
          error[i].errors.map(e => Toast.info(e.message, 1.5))
        }
        return;
      } else if ( value.code != code ) {
         Toast.info('验证码不正确', 1.5)
      } else {
        onNext()
      }
      console.log('value', JSON.stringify(value))

    });
  }

  const Seperator = () => <div style={{marginBottom: '1em'}}></div>;

  return (
    <div className={styles.content}>

      <div className={styles.phone}>
          目前绑定的手机是 : {phone}
      </div>

      <div className={styles.contentBody}>
        <input type="number"
            {...getFieldProps('code',{
              rules: [
                { required: true, message: '请输入验证码' }
              ]
            })}
            placeholder="请输入验证码"
            maxLength='6'
            className={styles.inputStyle}
          />

        <Seperator/>
        <div className={styles.btn}>
          <CustBtn {...btnProps}/>
        </div>
      </div>
    </div>
  );
};

ForgetPassword.propTypes = {
};

export default createForm()(ForgetPassword);
